<template>
	<div class="login-wrap">
		<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
			<h3 class="title">天坛VR学习一体机管理端</h3>
			<el-form-item prop="account">
					<el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号" clearable></el-input>
			</el-form-item>
			<el-form-item prop="password">
					<el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码" clearable show-password></el-input>
			</el-form-item>
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item prop="code">
						<el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="code-box">
					<img :src="ruleForm.codeimg" alt="" class="codeimg" @click="getcode()">
				</el-col>
			</el-row> -->
			<el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
			<el-button class="forget" type="text" @click="forget">忘记密码？</el-button>
			<el-form-item style="width:100%;">
					<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" @keyup.enter.native="enterLogin()" :loading="logining">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { setCookie, getCookie, delCookie } from '../utils/util';
import storage from 'store';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
export default {
	name: 'login',
	data() {
		return {
			logining: false,//	定义loading默认为false
			rememberpwd: false,// 判断是否勾选记住密码
			ruleForm: {
				account: '',		// account和password默认为空 admin  bzshanzhu123 http://admin.bzszxr.com/#/login
				password: '',
				// code: '',   	//	验证码参数
				randomStr: '',
				codeimg: ''
			},
			//	rules前端验证
			rules: {
				account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
				// code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			}
		}
	},
	mounted() {
		NProgress.start();
		setTimeout( () => {
			NProgress.done();
		},1000)
	},
	created() {	// 创建完毕状态(里面是操作)
		// this.$message({
		//   message: '账号密码及验证码不为空即可',
		//   type: 'success'
		// })
		// 获取图形验证码
		// this.getcode()
		// 获取存在本地的用户名密码
		this.getuserpwd();
		this.enterLogin(); // 初始化回车事件
	},
	// 里面的函数只有调用才会执行
	methods: {
		// 获取本地cookit中记住密码 保存的用户名和密码
		getuserpwd() {
			if (getCookie('user') != '' && getCookie('pwd') != '') {
				this.ruleForm.account = getCookie('user');
				this.ruleForm.password = getCookie('pwd');
				this.rememberpwd = true;
			}
		},
		//	获取info列表 登录
		submitForm(formName) {
			// console.log(this)
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.logining = true;
					this.$http.userMG.login({username: this.ruleForm.account,password: this.ruleForm.password}).then( res => {
						if (res.code == 200) {
							if (this.rememberpwd) {   // 判断是否点击了记住密码
								// 保存帐号到cookie，有效期7天
								setCookie('user', this.ruleForm.account, 7);
								// 保存密码到cookie，有效期7天
								setCookie('pwd', this.ruleForm.password, 7);
							} else {
								delCookie('user');
								delCookie('pwd');
							}
							// 如果请求成功就让他2秒跳转路由
							setTimeout( () => {
								this.logining = false;
								// 缓存token
								storage.set('logintoken', res.data.token);
								// 缓存用户个人信息
								localStorage.setItem('userdata', JSON.stringify(res.data));
								this.$store.commit('app/login', 'true');
								this.$router.push({ path: '/overviewOf' });
							}, 1000)
						} else {
							this.$message({
								message: res.errorMessage,
								type: 'warning'
							})
							this.logining = false;
						}
					})
				} else {
					// 获取图形验证码
					// this.getcode()
					this.$message.error('请输入用户名和密码！')
					this.logining = false;
					return false;
				}
			})
		},
		// 这是定义的触发回车的事件 此函数必须初始化的时候执行一次此函数 否则回车事件不生效
    enterLogin(){
      document.onkeydown = (e) => {
        e = window.event || e;
        if(this.$route.path == '/login' && (e.code == 'Enter' || e.code == 'NumpadEnter')){
          //	调用登录事件方法
          this.submitForm('ruleForm');
        }
      }
    },
		// 忘记密码  先给过提示就可以了其它的后续再添加
		forget() {
			this.$confirm('请联系管理员重置密码', '忘记密码', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				this.$message({
					type: 'success',
					message: '通知成功!'
				})
			})
			.catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				})
			})
		}
	}
}
</script>

<style scoped>
.login-wrap { box-sizing: border-box; width: 100%; height: 100%; background-image: url('../assets/image/login_bg.png'); background-repeat: no-repeat; background-position: center right; background-size: cover; }
.login-container { position: relative; border-radius: 10px; margin: 0px auto; top: 50%; transform: translateY(-60%); width: 350px; padding: 30px 35px 15px 35px; background: rgba(255, 255, 255, .8); border: 1px solid #eaeaea; text-align: left; box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1); }
.is-required >>> .el-input__inner{ background-color: rgba(255, 255, 255, .6); }
.forget { position: absolute; right: 35px; bottom: 105px; }
.title { font-weight: 600; font-size: 22px; text-align: center; margin-bottom: 30px; color: #505458; }
.remember { margin: 0px 0px 35px 0px; }
.code-box { text-align: right; }
.codeimg { height: 40px; }
</style>